<template>
  <div>
    <div class="top">
      <div class="btn-item">
        <el-button type="primary" round icon="el-icon-folder"
          >保存并关闭
        </el-button>
        <el-button type="primary" round icon="el-icon-folder-opened"
          >保存并修改下一条
        </el-button>
        <el-button
          type="success"
          round
          icon="el-icon-folder"
          @click="submitForm"
          >保存
        </el-button>
        <el-button type="danger" round icon="el-icon-folder-delete">
          取消
        </el-button>
      </div>
    </div>
    <!-- <testRender/> -->
    <div v-html="html">{{ html }}</div>
  </div>
</template>

<script>
import {
  listPage,
  getPage,
  delPage,
  addPage,
  updatePage,
} from "@/views/UDform/js/page";
import {
  addPageValue,
  editPageValue,
  getPageValue,
} from "@/views/UDform/js/pageValue";
import testRender from "./testRender";
export default {
  components: {
    testRender,
  },
  name: "ReviseInterfase",
  data() {
    return {
      html: "",
      formData: {},
      codeList: [],
      pageId: "",
      pageValueId: "",
    };
  },
  created() {
    this.pageId = this.$route.query.pageId;
    this.pageValueId = this.$route.query.pageValueId[0];
    // 防止 firefox 下 拖拽 会新打卡一个选项卡
    document.body.ondrop = (event) => {
      event.preventDefault();
      event.stopPropagation();
    };
    this.getPage(this.pageId);
    // 	  this.html=this.showHtml(`<form ref="elForm" :model="formData" :rules="rules" size="medium"  label-width="100px" >
    //       <div data-v-377e0596=""><label class="el-form-item__label" style="width: ">名称</label>
    // 	<div  style="margin-left: 90px;"><div data-v-377e0596=""><!---->
    // 	<input ref="getValue" type="text" id="name" value="123123" /><!----><!----><!----><!----></div><!----></div></div>
    // <div data-v-377e0596="" class="el-form-item el-form-item--small"><label class="el-form-item__label" style="width: ">年龄</label>
    // 	<div class="el-form-item__content" style="margin-left: 90px;"><div data-v-377e0596="" class="el-input el-input--small"><!---->
    // 	<input v-model="formData.age" type="text" id="age" autocomplete="off" placeholder="" class="el-input__inner" value="" /><!----><!----><!----><!----></div><!----></div></div>
    // <div data-v-377e0596="" class="el-form-item el-form-item--small"><label class="el-form-item__label" style="width: ">其他</label>
    // 	<div class="el-form-item__content" style="margin-left: 90px;"><div data-v-377e0596="" class="el-input el-input--small"><!---->
    // 	<input type="text" id="other" autocomplete="off" placeholder="" class="el-input__inner" value="" /><!----><!----><!----><!----></div><!----></div></div>

    //     </form>`);
    console.log("html=" + this.html);
  },
  methods: {
    showHtml: function (str) {
      return str
        .replace(str ? /&(?!#?\w+;)/g : /&/g, "&amp;")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'");
    },
    getPage(id) {
      getPage(id).then((response) => {
        // this.form = response.data;
        // this.open = true;
        // this.title = "修改页面自定义";
        this.html = this.showHtml(response.data.webPageCode);
        var fieldList = response.data.fieldList;
        for (var i = 0; i < fieldList.length; i++) {
          this.codeList.push(fieldList[i].code);
        }
        this.getPageValue(this.pageValueId, this.pageId);
      });
    },
    getPageValue(id, table) {
      getPageValue(id, table).then((response) => {
        if (response.code == 200) {
          for (var i = 0; i < this.codeList.length; i++) {
            if (null != document.getElementById(this.codeList[i])) {
              document.getElementById(this.codeList[i]).value =
                response.data[this.codeList[i]];
            }
          }
        }
      });
    },
    submitForm() {
      for (var i = 0; i < this.codeList.length; i++) {
        if (null != document.getElementById(this.codeList[i])) {
          this.formData[this.codeList[i]] = document.getElementById(
            this.codeList[i]
          ).value;
        }
      }
      console.log(this.formData, "formData");
      var data = {};
      data.map = this.formData;
      data.table = this.pageId;
      data.id = this.pageValueId;
      editPageValue(data).then((response) => {
        console.log(response, "response");
        if (response.code == 200) {
          this.msgSuccess("修改成功");
        }
      });
    },
  },
};
</script>

<style scoped>
.top {
  position: initial;
  top: 0;
  left: auto;
  right: 0;
  background-color: lightslategray;
}
</style>
